import { NCheckbox } from 'naive-ui'
import { ProFormOptions } from '@/components/pro-form/type'

const option1: ProFormOptions = [
  {
    // 布局属性，一行几个
    // 屏幕自适应布局
    grid: {
      cols: '1 s:2 m:4 l:4 xl:4 2xl:4'
      // 非自适应 布局不随着屏幕尺寸变化
      // cols: '1'
    },
    columnItemList: [
      {
        // 列表属性
        formItem: {
          // form表单元素类型
          formType: 'input',
          // label
          label: '名字',
          // 属性名
          key: 'name',
          // 规则
          rule: {
            required: true,
            message: '请输入名字',
            trigger: ['input']
          },
          // 提示文本
          placeholder: '请输入名字'
        }
      },
      {
        formItem: {
          formType: 'input',
          label: '电话号码',
          styleProps: {
            width: '200px'
          },
          key: 'phone',
          rule: {
            required: true,
            message: '请输入电话号码',
            trigger: ['input']
          },
          placeholder: '请输入电话号码'
        }
      },
      {
        formItem: {
          formType: 'inputNumber',
          label: '数字输入',
          key: 'inputNumber',
          // 设置样式属性，比如所占宽度
          styleProps: {
            width: '200px'
          },
          rule: {
            type: 'number',
            required: true,
            message: '请输入数字',
            trigger: ['input']
          }
        }
      },
      {
        formItem: {
          // 设置label宽度
          labelWidth: '100',
          formType: 'textarea',
          label: '文本域输入',
          key: 'inputTextarea',
          styleProps: {
            width: '200px'
          },
          rows: 2,
          rule: {
            // type: 'number',
            required: true,
            message: '请输入内容',
            trigger: ['input']
          }
        }
      }
    ]
  }
]
const option2: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:2 l:2 xl:2 2xl:2'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'select',
          label: '性别',
          key: 'sex',
          clearable: true,
          // 默认label，可以更改为其他属性
          labelField: 'label',
          // 默认value，可以更改为其他属性
          valueField: 'value',
          // 如果需要字典值，直接提供字典名称
          // 提供了dictCode优先字典值，options选项会被忽略
          // dictCode: 'DICT_NAME',
          options: [
            {
              label: '男',
              value: 'boy'
            },
            {
              label: '女',
              value: 'girl'
            }
          ],
          rule: {
            required: true,
            message: '请选择性别',
            trigger: ['change']
          },
          placeholder: '请选择性别'
        }
      },
      {
        formItem: {
          formType: 'treeSelect',
          label: '树',
          key: 'tree',
          // 如果需要字典值，直接提供字典名称
          // 提供了dictCode优先字典值，options选项会被忽略
          // dictCode: 'DICT_NAME',
          // label属性名
          labelField: 'label',
          // children属性名
          childrenField: 'children',
          // key属性名
          keyField: 'key',
          options: [
            {
              label: 'Rubber Soul',
              key: 'Rubber Soul',
              children: [
                {
                  label:
                    "Everybody's Got Something to Hide Except Me and My Monkey",
                  key: "Everybody's Got Something to Hide Except Me and My Monkey"
                }
              ]
            }
          ],
          rule: {
            required: true
          }
        }
      }
    ]
  }
]
const option3: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:4 l:4 xl:4 2xl:4'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'cascader',
          label: '级联',
          key: 'cascader',
          clearable: true,
          placement: 'bottom',
          rule: {
            required: true,
            message: '请选择数据',
            trigger: ['change']
          },
          options: [
            {
              label: '湖南省',
              value: '1',
              children: [
                {
                  label: '长沙市',
                  value: '11'
                }
              ]
            }
          ]
        }
      }
    ]
  }
]
const option4: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:3 l:3 xl:3 2xl:3'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'date',
          label: '日期',
          key: 'date',
          clearable: true,
          placement: 'bottom',
          rule: {
            required: true,
            message: '请输入日期',
            trigger: ['input']
          }
        }
      },
      {
        formItem: {
          formType: 'date',
          type: 'monthrange',
          label: '日期',
          key: 'monthrange',
          clearable: true,
          placement: 'bottom',
          rule: {
            required: true,
            message: '请输入日期',
            trigger: ['input']
          }
        }
      },
      {
        formItem: {
          formType: 'time',
          label: '时间',
          key: 'time',
          rule: {
            required: true,
            message: '请选择时间',
            trigger: ['input']
          }
        }
      }
    ]
  }
]
const option5: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:2 l:2 xl:2 2xl:2'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'switch',
          label: '切换',
          key: 'switch'
        }
      }
    ]
  }
]
const option6: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:4 l:4 xl:4 2xl:4'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'checkbox',
          label: '复选框',
          key: 'checkbox'
        }
      },
      {
        formItem: {
          formType: 'checkboxGroup',
          label: '复选框组',
          key: 'checkboxGroup',
          rule: {
            trigger: ['change'],
            message: '请选择数据',
            validator: (rule, val) => {
              if (val && val.length !== 0) return true
              return false
            }
          }
        }
      },
      {
        formItem: {
          formType: 'radio',
          label: '单选框',
          key: 'radio'
        }
      },
      {
        formItem: {
          formType: 'radioGroup',
          label: '单选框组',
          key: 'radioGroup',
          rule: {
            required: true,
            message: '请选择数据',
            trigger: ['change']
          }
        }
      }
    ]
  }
]
const option7: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:2 l:2 xl:2 2xl:2'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'color',
          label: '颜色',
          key: 'color'
        }
      }
    ]
  }
]
const option8: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:2 l:2 xl:2 2xl:2'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'slider',
          label: '进度',
          key: 'slider'
        }
      }
    ]
  }
]
const option9: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:2 l:2 xl:2 2xl:2'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'transfer',
          label: '穿梭框',
          key: 'transfer',
          options: [
            {
              label: 'Option 1',
              value: 1
            },
            {
              label: 'Option 2',
              value: 2
            }
          ]
        }
      }
    ]
  }
]
const option10: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:4 l:4 xl:4 2xl:4'
    },
    columnItemList: [
      {
        formItem: {
          // 必须要声明 formType 为 custom 类型
          formType: 'custom',
          label: 'render',
          key: 'render',
          render() {
            return h('div', {}, 'I am render Data')
          }
        }
      },
      {
        formItem: {
          formType: 'checkboxGroup',
          label: '复选框组',
          key: 'checkboxGroup',
          rule: {
            trigger: ['change'],
            message: '请选择数据',
            validator: (rule, val) => {
              if (val && val.length !== 0) return true
              return false
            }
          },
          // 这个只适合特定选项类型的render，比如单/多选框 或者 单/多选项组
          renderContent: function render() {
            return h('div', [
              Array.from({ length: 4 }).map((item, index) => {
                return h(NCheckbox, {
                  value: index,
                  label: 'render ' + index
                })
              })
            ])
          }
        }
      }
    ]
  }
]
const option11: ProFormOptions = [
  {
    grid: {
      cols: '1 s:2 m:4 l:4 xl:4 2xl:4'
    },
    columnItemList: [
      {
        formItem: {
          formType: 'input',
          // 设置label宽度
          labelWidth: '120',
          label: 'label宽度',
          key: 'inputLabel',
          rule: {
            required: true,
            message: '请输入',
            trigger: ['input']
          }
        }
      },
      {
        formItem: {
          formType: 'input',
          label: 'input宽度',
          key: 'inputWidth',
          // 设置样式属性，比如所占宽度
          styleProps: {
            width: '100px'
          },
          rule: {
            required: true,
            message: '请输入',
            trigger: ['input']
          }
        }
      }
    ]
  }
]
export {
  option1,
  option2,
  option3,
  option4,
  option5,
  option6,
  option7,
  option8,
  option9,
  option10,
  option11
}
